<template>
  <div class="Institutionalregistration">
    <div class="container">
      <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <fourLevelLinkage
              @changeProvince="(val) => {filterObj.provinceCode = val; filterObj.cityCode = '';filterObj.areaCode = '', filterObj.hospitalId = ''}"
              @changeCity="(val) => {filterObj.cityCode = val; filterObj.areaCode = '';filterObj.hospitalId = ''}"
              @changeArea="(val) => {filterObj.areaCode = val; filterObj.hospitalId = ''}"
              @changeHospital="(val) => filterObj.hospitalId = val"
              :province="filterObj.provinceCode"
              :city="filterObj.cityCode"
              :area="filterObj.areaCode"
              :hospital="filterObj.hospitalId"
            ></fourLevelLinkage>
          </div>
          <div class="filter-item">
            <Select class="w-select" clearable v-model="filterObj.lectureType" :key="filterObj" style='width:150px;' placeholder="购买类型">
              <Option value="" style='text-align:center'>全部</Option>
              <Option :value="1" style='text-align:center'>直播</Option>
              <Option :value="0" style='text-align:center'>点播</Option>
            </Select>
          </div>
          <div class="filter-item">
            <Select class="w-select" clearable v-model="filterObj.status" :key="filterObj" style='width:150px;'  placeholder="状态">
              <Option value="" style='text-align:center'>全部</Option>
              <Option v-for="(item, index) in zhuangtai" :key="index" :value="item.id" style='text-align:center'>{{ item.name }}</Option>
            </Select>
          </div>
          <div class="filter-item">
            <DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" format="yyyy-MM-dd" placeholder="请选择购买日期" separator='至' style="width: 200px"></DatePicker>
          </div>
          <div class="filter-item">
            <Input v-model="filterObj.keywords" placeholder="用户昵称"/>
          </div>
          <div class="filter-btn-group">
            <Button type="primary" icon="ios-search" @click="cloudStockMonitorList(1)" class="btn"></Button>
            <Button icon="icon-gengxin" @click="reset" class="btn">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
            </Button>
          </div>
        </div>
      </header>
      <!-- 列表 -->
      <div class="list">
        <Table
          border
          :columns="column"
          :data="list"
          stripe
          no-filtered-data-text="未查询到符合条件的记录"
          @on-selection-change="selectChange"
        ></Table>
      </div>
      <!--分页器-->
      <div class="page">
            <Page :total="pagetotal" :current='filterObj.pageNo' :page-size="filterObj.pageSize"  show-total show-elevator @on-change="pageChange"/>
        </div>
      <Modal
			v-model="fundcode"
			title="直播点播详情"
			:footer="null"
      styles="padding: none;margin: none"
      >  				
        <div class="detail">
          <div class="detail-item">
            <p class="detail-item-tle">购买信息</p>
            <div class="detail-item-com">
              <p style="font-size: 16px; color: #ff9966">{{ dianzhidatesc.status | format }}</p>
              <p>订单编号：{{ dianzhidatesc.orderNumber ? dianzhidatesc.orderNumber : '暂无订单编号' }}</p>
              <p>购买时间：{{ dianzhidatesc.createTime ? dianzhidatesc.createTime : '暂无购买时间' }}</p>
              <p>订单类型：{{ dianzhidatesc.lectureType === 1 ? '直播' : '点播' }}</p>
              <p>用户昵称：{{ dianzhidatesc.memberName ? dianzhidatesc.memberName : '暂无用户昵称' }}</p>
              <p>购买金额：{{ dianzhidatesc.cost ? dianzhidatesc.cost : '暂无购买金额' }}</p>
            </div>
          </div>
          <div class="detail-item">
            <p class="detail-item-tle">{{ dianzhidatesc.lectureType === 1 ? '直播信息' : '点播信息' }}</p>
            <div class="detail-item-com">
              <p>{{ dianzhidatesc.lectureType === 1 ? '直播' : '点播' }}标题：{{ dates.title }}</p>
              <p>{{ dianzhidatesc.lectureType === 1 ? '直播时间' : '发布时间' }}：{{ dianzhidatesc.createTime }}</p>
              <p>{{ dianzhidatesc.lectureType === 1 ? '直播医生' : '点播医生' }}：{{ dates.doctorName }} {{ dates.deptName }} {{ dates.hospitalName }}</p>
              <p>讲堂类型：{{ dates.columnName }}</p>
            </div>
          </div>
        </div>
        <div slot="footer" class="btn-group" style="text-align:center">
          <Button @click="fundcode = false">
            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
          </Button>		
        </div>			
			</Modal>
    </div>
  </div>
</template>
<script>
import api from "@/api/commonApi";
import { DatePicker } from "view-design";
import Utils from "@/utils";
import fourLevelLinkage from "@/components/fourLevelLinkage";
let nowDate = new Date();
let date = {
  year: nowDate.getFullYear(),
  month: nowDate.getMonth() + 1,
  date: nowDate.getDate()
}
const filterObj = {
  hospitalId: null,
  lectureType: "",
  status: "",
  time: [],
  keywords: null,
  pageSize: 10,
  pageNo: 1,
};
  export default {
    components: {
      DatePicker,
      fourLevelLinkage
    },
    data() {
      return {
        pagetotal: null,
        zhuangtai: [
          {name:'待付款', id:0},
          {name:'已付款', id:1},
          {name:'已取消', id:2},
          {name:'已退款', id:3},
          {name:'支付中', id:4},
          {name:'支付失败', id:5},
          // {name:'退款中', id:6},
          // {name:'部分退款', id:7},
        ],
        filterObj: this.deepClone(filterObj),
        isBack: 1,
        list: [],
        column: [
          { type: "sum", title: "排序", width: 80, align: "center",
            render: (h, params) => {
              let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
              return h("span", sum);
            }
          },
          { key: "orderNumber", title: "订单编号", align: "center" },
          { key: "createTime", title: "购买时间", align: "center" },
          { key: "cost", title: "购买金额", align: "center" },
          { key: "title", title: "直播标题", align: "center" },
          {
            key: "lectureType",
            title: "订单类型",
            align: "center",
            render: (h, params) => {
              let status = params.row.lectureType;
              return status === 1 ? '直播' : '点播';
            }
          },
          { key: "memberName", title: "用户昵称", align: "center" },
          { key: "telephone", title: "联系方式", align: "center" },                           
          {
            key: "status",
            title: "订单状态",
            align: "center",
            render: (h, params) => {
              let status = params.row.status;
              return h("span", {}, this.zhuangtai[status].name);
            }
          },
          {
            title: "设置",
            align: "center",
            width: 100,
            render: (h, params) => {
              let row = params.row;
              return h("div", [
                h(
                  "a",
                  {
                    props: {
                      size: "small",
                      type: 'primary'
                    },
                    on: {
                      click: () => {
                        this.details(row);
                      }
                    }
                  },
                  "明细"
                ),
              ]);
            }
          }
        ],
        fundcode: false,
        lectureType: localStorage.getItem('lectureType'),
        dates: {},
        dianzhidatesc: {}
      };
    },
    created() {
      let breadList = [
        { path: "/index", title: "首页" },
        {
          path: "",
          title: "订单管理中心"
        },
        {
          path: "/index/operation/cloudStockManagement/stockmonitor/list",
          title: "直播点播咨询订单"
        }
      ];
      this.$emit("changeBreadList", breadList);
    },
    mounted() {
      this.cloudStockMonitorList(1);
    },
    methods: {
      reset() {
        this.filterObj = this.deepClone(filterObj);
        this.cloudStockMonitorList(1);
      },
      pageChange(index) {
        this.filterObj.pageNo = index;
        this.cloudStockMonitorList(index);
      },
      // 药店详情
      details(item) {
        let datesc = {
          lectureType: item.lectureType,
          status: item.status,
          orderNumber: item.orderNumber,
          cost: item.cost,
          createTime: item.createTime,
          memberName: item.memberName
        }
        localStorage.setItem('dianzhidatesc', JSON.stringify(datesc))
        console.log(localStorage.setItem('dianzhidatesc', JSON.stringify(datesc)))
        this.fundcode = true
        this.gethomecode(item.demandId)
        // this.functionJS.queryNavgationTo(this, '/index/operation/orders/Livevideo/detail/' + item.demandId);
      },
      //获取直播点播详情
      gethomecode(demandId) {
        this.dianzhidatesc = JSON.parse(localStorage.getItem('dianzhidatesc'))
        let reqData = {
          demandId: demandId
        }
        this.$axios.post(api.findDoctorDemandById, reqData).then(res => {
          this.dates = res.data.object
          console.log(this.dates)
        });
      },
      cloudStockMonitorList(val) {
        const reqData = this.deepClone(this.filterObj);
        if(val) {
          this.filterObj.pageNo = val;
          reqData.pageNo = val;
        }
        let startTime = '';
        let endTime = '';
        if(this.filterObj.time[0]) {
          startTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[0]).substring(0,10)
        }
        if(this.filterObj.time[1]) {
          endTime =  Utils.getNowDateBySpecialFormat(this.filterObj.time[1]).substring(0,10)
        }
        reqData.startTime = startTime ? startTime : '';
        reqData.endTime = endTime ? endTime : ''
        this.$axios.post(api.findfactionLecture, reqData).then(res => {
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.pagetotal = ret.total
            this.list = ret.records
          } else {
            this.list = []
            this.$Message.info(res.data.message);
          }
        });
      },
      deepClone(obj) {
        return JSON.parse(JSON.stringify(obj));
      }
    },
    filters: {
      format(val) {
        switch (parseInt(val)) {
          case 0:
            return '待付款'
          case 1:
            return '已付款'
          case 2:
            return '已取消'
          case 3:
            return '已退款'
          case 4:
            return '支付中'
          case 5:
            return '支付失败'
        }
      }
    },
    watch: {
      'filterObj.pageSize'(nv, ov) {
        this.filterObj.pageNo = 1;
        this.cloudStockMonitorList(1);
      }
    },
  };
</script>
<style lang="less" scoped>
  .Institutionalregistration {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .container {
      width: 100%;
      margin: 0 auto;
      .filter-part {
        display: flex;
        flex-wrap: wrap;
        .filter-item {
          display: flex;
          margin: 10px 10px 10px 0;
          label {
            white-space: nowrap;
            line-height: 32px;
            padding-left: 5px;
            text-align: right;
          }
          .input {
            width: 220px;
          }
          .select {
            width: 70px;
          }
        }
        .filter-btn-group {
          // margin: 0px 10px 10px 0;
          flex: 0 0 auto;
          .btn {
            width: 58px;
            height: 32px;
          }
        }
      }
      header {
        width: 100%;
        .btn {
          margin-top: 10px;
        }
      }
      .list {
        width: 100%;
        margin: 10px 0;
      }
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
  }

  .detail{
    width: 100%;
    margin: auto;
    // padding-top: 10px;
    
    .detail-item{
      width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
      .detail-item-tle{
        font-size: 20px;
            padding-left: 15px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;   
      }
      .detail-item-com{
        width: 96%;
        margin: auto;
        font-size: 13px;
        color: #676a6c;
        padding: 15px 0;
        line-height: 22px;
        padding-bottom: 20px;
        .img-bor{
          width: 100%;
          border: 1px solid #ddd;
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-start;
        }
      }
    }
  }
  /deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
